<template>
    <el-card v-loading="loading">
        <div class="card-header">
            <span>知识库配置</span>
        </div>
        <el-form label-width="向量模型路径" :model="formKbbase" :rules="rules" ref="formRef">
            <el-form-item label="模型运行设备" prop="device" :label-width="formLabelWidth">
                <el-radio-group v-model="formKbbase.device">
                    <el-radio :label="'auto'">自动</el-radio>
                    <el-radio :label="'cuda'">cuda</el-radio>
                    <el-radio :label="'mps'">mps</el-radio>
                    <el-radio :label="'cpu'">cpu</el-radio>
                    <el-radio :label="'xpu'">xpu</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="单段文本长度" prop="CHUNK_SIZE" :label-width="formLabelWidth">
                <el-input-number v-model="formKbbase.CHUNK_SIZE" :min="1" :max="1000"></el-input-number>
            </el-form-item>
            <el-form-item label="匹配向量数量" prop="VECTOR_SEARCH_TOP_K" :label-width="formLabelWidth">
                <el-input-number v-model="formKbbase.VECTOR_SEARCH_TOP_K" :min="1" :max="1000"></el-input-number>
            </el-form-item>
            <el-form-item label="相邻文本重合长度" prop="OVERLAP_SIZE" :label-width="formLabelWidth">
                <el-input-number v-model="formKbbase.OVERLAP_SIZE" :min="1" :max="1000"></el-input-number>
            </el-form-item>
            <el-form-item label="距离阈值" prop="SCORE_THRESHOLD" :label-width="formLabelWidth">
                <div style="display: inline-flex; align-items: center; width: 100%;">
                    <el-slider v-model="formKbbase.SCORE_THRESHOLD" :min="0" :max="1" :step="0.1"
                        style="flex-grow: 1;" />
                    <span class="num-span">{{ formKbbase.SCORE_THRESHOLD }}</span>
                </div>
            </el-form-item>
        </el-form>
    </el-card>
    <div class="btn-box">
        <el-button size="large" @click="defaultClick">设为默认值</el-button>
        <el-button size="large" type="primary" @click="saveClick">保存</el-button>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const formLabelWidth = '135px';
import sysSetting from "../../api/sysSetting"
const hasToken = <string>localStorage.getItem('accessToken');
const loading = ref(false);

//定义知识库字段类型
interface defineKbModal {
    device?: string | null,
    CHUNK_SIZE?: number | null,
    VECTOR_SEARCH_TOP_K?: number | null,
    OVERLAP_SIZE?: number | null,
    SCORE_THRESHOLD?: number | null,
};

//  知识库参数
const formKbbase = ref<defineKbModal>({
    device: '',
    CHUNK_SIZE: 0,
    VECTOR_SEARCH_TOP_K: 0,
    OVERLAP_SIZE: 0,
    SCORE_THRESHOLD: 0
});
//获取知识库数据
const getKbData = () => {
    loading.value = true;
    sysSetting.getKbModalInfo(hasToken).then(res => {
        // console.log('res', res);
        Object.assign(allData, res.data.embedding)
        formKbbase.value = {
            device: res.data.embedding.device,
            CHUNK_SIZE: res.data.embedding.CHUNK_SIZE,
            VECTOR_SEARCH_TOP_K: res.data.embedding.VECTOR_SEARCH_TOP_K,
            OVERLAP_SIZE: res.data.embedding.OVERLAP_SIZE,
            SCORE_THRESHOLD: res.data.embedding.SCORE_THRESHOLD,
        }
    }).finally(() => {
        // ElMessage.error('获取用户信息失败');
        loading.value = false;
    });
};
// 储存所有数据\默认值
const allData = reactive({
    CHUNK_SIZE: 0,
    OVERLAP_SIZE: 0,
    SCORE_THRESHOLD: 0,
    VECTOR_SEARCH_TOP_K: 0,
    device: "",
    name: "",
    path: ""
})
//设置默认值
const defaultClick = () => {
    // console.log('allData',allData);
    formKbbase.value = {
        device: allData.device,
        CHUNK_SIZE: allData.CHUNK_SIZE,
        VECTOR_SEARCH_TOP_K: allData.VECTOR_SEARCH_TOP_K,
        OVERLAP_SIZE: allData.OVERLAP_SIZE,
        SCORE_THRESHOLD: allData.SCORE_THRESHOLD,
    }
}
const formRef = ref(null)
// 表单校验规则
const rules = {
    device: [{ required: true, message: '请选择模型运行设备', trigger: 'change' }],
    CHUNK_SIZE: [{ required: true, message: '请输入单行文本长度', trigger: 'change' }],
    VECTOR_SEARCH_TOP_K: [{ required: true, message: '请输入匹配向量数量', trigger: 'change' }],
    OVERLAP_SIZE: [{ required: true, message: '请输入相邻文本重合长度', trigger: 'blur' }],
    SCORE_THRESHOLD: [{ required: true, message: '请设置距离阈值', trigger: 'blur' }],
};
//保存
const saveClick = () => {
    // console.log('allData',allData);
    // console.log('formKbbase.value',formKbbase.value);
    //组合编辑数据
    const obj = {
        CHUNK_SIZE: formKbbase.value.CHUNK_SIZE,
        device: formKbbase.value.device,
        VECTOR_SEARCH_TOP_K: formKbbase.value.VECTOR_SEARCH_TOP_K,
        OVERLAP_SIZE: formKbbase.value.OVERLAP_SIZE,
        SCORE_THRESHOLD: formKbbase.value.SCORE_THRESHOLD,
        name: allData.name,
        path: allData.path
    };
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            sysSetting.updateKnowLedgeCard(hasToken, obj).then(res => {
                ElMessage.success('保存成功');
                getKbData();
            }).catch(error => {
                //   console.error(error);
                ElMessage.error('保存失败');
            });
        }else {
            ElMessage.error('信息未填写完整');
        }
    })

}
getKbData();

</script>
<style scoped>
.el-card {
    width: 100%;
    margin-bottom: 30px;
}

.card-header {
    text-align: center;
    font-size: 18px;
    margin-bottom: 12px;
}

.btn-box {
    float: right;
}

.num-span {
    color: #409eff;
    margin-left: 15px;
    font-weight: bold;
    font-size: 16px;
}
</style>